// ([a-z])([A-Z]) -> $1-\L$2

// ============ Color ============
// 品牌主色
// 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等
// #116DFF
// #0669ff
// #055DF5
// #0057ff
// #155EEF
// #0064ff
// #254CDD
$--color-primary: #116DFF;
// 主色浅色背景色
// 主色浅色背景颜色，一般用于视觉层级较弱的选中状态
$--color-primary-bg: #f2f6ff;
// 主色悬浮态
$--color-primary-hover: #3388ff;
// 主色激活态
$--color-primary-active: #0054db;
// 主色禁用态
$--color-primary-disabled: #99c7ff;

// 品牌次要色
$--color-secondary: #8e39ff;
// 次要色浅色背景色
// 次要色浅色背景颜色，一般用于视觉层级较弱的选中状态
$--color-secondary-bg: #f6f0ff;
// 次要色浅色背景悬浮态
// 与次要色浅色背景颜色相对应的悬浮态颜色
$--color-secondary-bg-hover: #ab76ff;
// 次要色激活态
$--color-secondary-active: #424fdb;
// 次要色禁用态
$--color-secondary-disabled: #cfbbff;

// 成功色
$--color-success: #34c759;
// 成功色的浅色背景颜色
// 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色
$--color-success-bg: #ebfff8;
// 成功色的浅色背景色悬浮态
// 成功色浅色背景颜色，一般用于视觉层级较弱的选中状态
$--color-success-bg-hover: #bcf7e5;
// 成功色的描边色
// 成功色的描边色，用于 Tag 和 Alert 的成功态描边色
$--color-success-border: #8debd0;
// 成功色的描边色悬浮态
$--color-success-border-hover: #62debf;
// 成功色的深色悬浮态
$--color-success-hover: #62debf;
// 成功色的深色激活态
$--color-success-active: #0b9e88;
// 成功色的文本悬浮态
$--color-success-text-hover: #3bd1b0;
// 成功色的文本默认态
$--color-success-text: $--color-success;
// 成功色的文本激活态
$--color-success-text-active: #0b9e88;

// 成功色
$--color-error: #ff594d;
// 错误色的浅色背景颜色
$--color-error-bg: #fff3f0;
// 错误色的浅色背景色悬浮态
$--color-error-bg-hover: #fff3f0;
// 错误色的描边色
$--color-error-border: #ffd0c7;
// 错误色的描边色悬浮态
$--color-error-border-hover: #ffab9e;
// 错误色的深色悬浮态
$--color-error-hover: #ff8375;
// 错误色的深色激活态
$--color-error-active: #d93c36;
// 错误色的文本悬浮态
$--color-error-text-hover: #ff8375;
// 错误色的文本默认态
$--color-error-text: $--color-error;
// 错误色的文本激活态
$--color-error-text-active: #d93c36;

// 纯白色
$--color-white: #ffffff;

// ============ Fill ============
// 一级填充色
// 深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果
$--color-fill: #e9e9ea;
// 二级填充色
// 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等
$--color-fill-secondary: rgba(0, 0, 0, 0.06);
// 三级填充色
// 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色
$--color-fill-tertiary: rgba(0, 0, 0, 0.03);
// 四级填充色
// 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等
$--color-fill-quaternary: rgba(0, 0, 0, 0.01);

// ============ Font ============
// 一级文本色
// 最深的文本色
$--color-text: #242424;
// 二级文本色
// 一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景
$--color-text-secondary: #999999;
// 三级文本色
// 一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景
$--color-text-tertiary: #c8c9cc;
// 四级文本色
// 最浅的文本色，例如表单的输入提示文本、禁用色文本等
$--color-text-quaternary: #cccccc;

$--font-family: PingFangSC-Regular, PingFang SC;
$--font-size-mini: 12px;
$--font-size-small: 13px;
$--font-size-base: 14px;
$--font-size: $--font-size-base;
$--font-size-medium: 16px;
$--font-size-large: 24px;
$--font-weight-bold: 600;
$--line-height: 1.5;
$--line-height-small: 1.2;
$--letter-space: 1px;

// ============ Size ============
$--size-xxxs: 2px;
$--size-xxs: 4px;
$--size-xs: 8px;
$--size-sm: 12px;
$--size-lg: 16px;

// ============ padding ============
$--padding-xxxs: $--size-xxxs;
$--padding-xxs: $--size-xxs;
$--padding-xs: $--size-xs;
$--padding-sm: $--size-sm;
$--padding-lg: $--size-lg;

$--container-padding-inline: $--padding-lg;
$--container-padding-block: $--padding-lg;

// ============ Margin ============
$--margin-xxxs: $--size-xxxs;
$--margin-xxs: $--size-xxs;
$--margin-xs: $--size-xs;
$--margin-sm: $--size-sm;
$--margin-lg: $--size-lg;

// ============ Border ============
$--color-border: #f7f7f7;
$--color-border-secondary: #f0f0f0;

// ============ BoxShadow ============
// 一级阴影
// 物体位于低层级，此时物体被操作（悬停、点击等）触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等
$--box-shadow: 0 10px 20px 0 rgba(6, 10, 38, 0.04);
// 二级阴影
// 控制元素二级阴影样式
// 物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等
$--box-shadow-secondary: 0px 4px 10px 0px rgba(0, 0, 0, 0.077);
// 三级阴影
// 控制元素三级盒子阴影样式
// 物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等
$--box-shadow-tertiary: 0px 6px 10px 4px rgba(45, 51, 64, 0.092);
$--box-shadow-heavy: $--box-shadow, 0px 0px 10px 0px rgba(0, 0, 0, 0.092);

// ============ Line ============
$--line-width: 1px;
$--line-type: solid;

// ============ ZIndex ============
$--z-index-popup: 1000;
$--z-index-overlay: calc($--z-index-popup - 1);
$--z-index-navbar: calc($--z-index-popup - 2);
$--z-index-fixed: calc($--z-index-popup - 3);

// ============ Style ============
// 基础背景色
$--color-bg: #f9f9f9;
// 布局背景色
$--color-bg-layout: #f7f7f7;
// 组件容器背景色
$--color-bg-container: $--color-white;
// 容器禁用态下的背景色
// 控制容器在禁用状态下的背景色
$--color-bg-container-disabled: $--color-fill-quaternary;
// 浮层容器背景色
$--color-bg-elevated: $--color-white;
// 浮层的背景蒙层颜色
// 用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用
$--color-bg-mask: rgba(0, 0, 0, 0.5);

$--border: $--color-border $--line-width $--line-type;
$--border-radius-xxxs: 2px;
$--border-radius-xxs: 4px;
$--border-radius-xs: 6px;
$--border-radius-sm: 12px;
$--border-radius-lg: 16px;
$--border-radius-button: 32px;
$--border-radius-input: 32px;
$--border-radius-outer: 4px;

$--box-shadow-tabs-fixed: 0px 4px 8px 0px rgba(0, 0, 0, 0.038);
